<template>
  <div class="workbench">
    <a-row :gutter="[8, 8]">
      <a-col :span="8" v-if="customer_label !== '6214a41643137'">
        <a-card style="height: 215px; padding: 10px" :hoverable="true">
          <div style="" class="heads">
            <span style="flex: 1"> 全年实际现金流 </span>
            <span> </span>
          </div>
          <div style="font-weight: 600; margin-bottom: 43px; font-size: 20px">
            <span>{{ amountStreamWtch }}</span>
          </div>
          <div style="display: flex">
            <span style="flex: 1">
              收入:
              <span style="color: #ffa4a4">{{ incomeWtch }}</span>
            </span>
            <span>
              支出:
              <span style="color: #90e0c6">{{ payWatch }}</span>
            </span>
          </div>
          <div
            style="
              width: 100%;
              padding: 0 5px;
              margin-bottom: 10px;
              margin-top: 18px;
            "
          >
            <div class="linear"></div>
          </div>
          <div style="margin-bottom: 20px">
            全年现金流预测: {{ cashFlowListWatch }}
            (收入)
          </div>
        </a-card>
      </a-col>
      <a-col :span="customer_label !== '6214a41643137' ? 8 : 12">
        <a-card style="height: 215px; padding: 10px" :hoverable="true">
          <div style="" class="heads">
            <span style="flex: 1"> 收缴率 </span>
            <span> </span>
          </div>
          <div style="font-weight: 600; margin-bottom: 20px; font-size: 20px">
            {{ collectionRateList.paymentRate }} %
          </div>
          <div style="margin-bottom: 17px">
            <div>
              <Progress
                :percent="collectionRateList.paymentRate"
                :show-info="false"
              />
            </div>
            <div>
              逾期未结清租客数: {{ collectionRateList.overDueOwnerCount }}
            </div>
          </div>
          <div style="width: 100%; padding: 0 5px; margin-bottom: 10px">
            <div class="linear"></div>
          </div>
          <div
            style="margin-bottom: 20px"
            v-if="customer_label !== '6214a41643137'"
          >
            逾期未结清账单金额:
            {{ overWatch }}
          </div>
        </a-card>
      </a-col>
      <a-col :span="customer_label !== '6214a41643137' ? 8 : 12">
        <a-card style="height: 215px; padding: 15px" :hoverable="true">
          <div style="" class="heads">
            <span style="flex: 1"> 已收纳保证金 </span>
            <span> </span>
          </div>
          <div style="font-weight: 600; margin-bottom: 75px; font-size: 20px">
            {{ bondAmountWatch }}
          </div>
          <div style="width: 100%; padding: 0 5px; margin-bottom: 10px">
            <div class="linear"></div>
          </div>
          <div style="margin-bottom: 20px">
            保证金退还率: {{ bondList.handRate }}
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="[8, 8]" :wrap="true" class="mt-10">
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">现金流 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              v-model:value="value"
              picker="month"
              :allowClear="false"
              @change="handleChange"
            />
          </a-col>
          <div id="cash" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">现金流预测 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              v-model:value="valueMonthly"
              picker="month"
              :allowClear="false"
              @change="monthlyChange"
            />
          </a-col>
          <div id="monthlyEcharts" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">收缴率</a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              v-model:value="cashDateCollection"
              picker="month"
              :allowClear="false"
              @change="getCollection"
            />
          </a-col>
          <div id="Collection" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">分摊收缴率 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              v-model:value="cashDateShareRate"
              picker="month"
              :allowClear="false"
              @change="getShareRate"
            />
          </a-col>
          <div id="shareRate2" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">收益 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              v-model:value="profitMoment"
              picker="month"
              :allowClear="false"
              @change="getProfit"
            />
          </a-col>
          <div id="profit2" class="chart"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  onMounted,
  onUnmounted,
  reactive,
  nextTick,
} from "vue";
import {
  QuestionCircleOutlined,
  MenuOutlined,
  DownloadOutlined,
  FormOutlined,
  DeleteOutlined,
  CheckSquareOutlined,
  PlusOutlined,
  CaretDownOutlined,
} from "@ant-design/icons-vue";
import { Empty, Modal, Progress } from "ant-design-vue";
import { Chart } from "@antv/g2";
import request from "../../../common/utils/request";
import moment from "moment";
import dayOfYear from "moment/plugin/dayOfYear";
moment.extend(dayOfYear);
import store from "../../../store";
const dateFormat = "YYYY-MM-DD";
export default defineComponent({
  name: "homeOverviewProperty",
  components: {
    // QuestionCircleOutlined,
    // MenuOutlined,
    // DownloadOutlined,
    // FormOutlined,
    // DeleteOutlined,
    CheckSquareOutlined,
    PlusOutlined,
    CaretDownOutlined,
    Progress,
  },
  setup() {
    // 今年实际现金流
    const cashFlowList = ref({});
    const cashFlowListWatch = computed(() => {
      return String(parseInt(cashFlowList.value.expectIncome)).length < 5
        ? Number(cashFlowList.value.expectIncome) + " " + "元"
        : String(parseInt(cashFlowList.value.expectIncome)).length > 8
        ? Number(cashFlowList.value.expectIncome / 100000000).toFixed(2) +
          " " +
          "亿"
        : Number(cashFlowList.value.expectIncome / 10000).toFixed(2) +
          " " +
          "万元";
    });
    const amountStreamWtch = computed(() => {
      return String(parseInt(cashFlowList.value.amountStream)).length < 5
        ? Number(cashFlowList.value.amountStream) + " " + "元"
        : String(parseInt(cashFlowList.value.amountStream)).length > 8
        ? Number(cashFlowList.value.amountStream / 100000000).toFixed(2) +
          " " +
          "亿"
        : Number(cashFlowList.value.amountStream / 10000).toFixed(2) +
          " " +
          "万元";
    });
    const incomeWtch = computed(() => {
      return String(parseInt(cashFlowList.value.income)).length < 5
        ? Number(cashFlowList.value.income) + " " + "元"
        : String(parseInt(cashFlowList.value.income)).length > 8
        ? Number(cashFlowList.value.income / 100000000).toFixed(2) + " " + "亿"
        : Number(cashFlowList.value.income / 10000).toFixed(2) + " " + "万元";
    });
    const payWatch = computed(() => {
      return String(parseInt(cashFlowList.value.pay)).length < 5
        ? Number(cashFlowList.value.pay) + " " + "元"
        : String(parseInt(cashFlowList.value.pay)).length > 8
        ? Number(cashFlowList.value.pay / 100000000).toFixed(2) + " " + "亿"
        : Number(cashFlowList.value.pay / 10000).toFixed(2) + " " + "万元";
    });
    const cashFlow = () => {
      request.get("/org", "/asset/incomeStatic").then((res) => {
        cashFlowList.value = res;
      });
    };
    cashFlow();

    // 收缴率
    const collectionRateList = ref({});
    const overWatch = computed(() => {
      return String(parseInt(collectionRateList.value.overDueBillAmount))
        .length < 5
        ? Number(collectionRateList.value.overDueBillAmount) + "" + "元"
        : String(parseInt(collectionRateList.value.overDueBillAmount)).length >
          8
        ? Number(
            collectionRateList.value.overDueBillAmount / 100000000
          ).toFixed(2) +
          "" +
          "亿"
        : Number(collectionRateList.value.overDueBillAmount / 10000).toFixed(
            2
          ) +
          "" +
          "万元";
    });
    const collectionRate = () => {
      request.get("/org", "/asset/paymentRate").then((res) => {
        collectionRateList.value = res;
      });
    };
    collectionRate();

    //保证金
    const bondList = ref({});
    const bondAmountWatch = computed(() => {
      return String(parseInt(bondList.value.bondAmount)).length < 5
        ? Number(bondList.value.bondAmount) + " " + "元"
        : String(parseInt(bondList.value.bondAmount)).length > 8
        ? Number(bondList.value.bondAmount / 100000000).toFixed(2) + " " + "亿"
        : Number(bondList.value.bondAmount / 10000).toFixed(2) + " " + "万元";
    });
    const bond = () => {
      request.get("/org", "/asset/bondStatic").then((res) => {
        bondList.value = res;
      });
    };
    bond();

    //现金流 Echarts
    const value = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const handleChange = (date, dateString) => {
      cash(dateString[0], dateString[1]);
    };
    const chartCash = {};
    const pickerCash = ref("date");
    const cashMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const cash = (start_date, end_date) => {
      if (!chartCash.chart1) {
        chartCash.chart1 = new Chart({
          container: "cash",
          autoFit: true,
          height: 500,
          padding: [70],
        });

        chartCash.chart1.tooltip({
          showMarkers: false,
        });
        chartCash.chart1.interaction("active-region");
        chartCash.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 725,
        });

        chartCash.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });
        chartCash.chart1.axis("amount", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val / 10 + ".00";
            },
          },
          position: "left",
        });
        chartCash.chart1.axis("net_amount", {
          position: "left",
          label: {
            formatter: (val) => {
              return +val / 10 + ".00";
            },
          },
        });

        chartCash.chart1.scale({
          amount: {
            min: 0,
            nice: true,
          },
          net_amount: {
            min: 0,
            nice: true,
          },
        });
        chartCash.chart1
          .interval()
          .position("date*amount")
          .style({ radius: [20, 20, 0, 0] })
          .size(10)
          .color("name", (val) => {
            if (val === "支出") {
              return "red";
            }
            return "#6294f9";
          })
          .adjust([
            {
              type: "dodge",
              marginRatio: 0.5,
            },
          ]);

        chartCash.chart1.legend("name", {
          position: "right-top",
          layout: "horizontal",
        });
        chartCash.chart1.legend("net_name", {
          position: "right-top",
          layout: "horizontal",
        });

        chartCash.chart1
          .line()
          .position("date*net_amount")
          .color("net_name")
          .shape("smooth");
        chartCash.chart1
          .area()
          .position("date*net_amount")
          .color("net_name")
          .shape("smooth");
      }
      request
        .get("/org", "/board/cashFlow", {
          start_date: start_date
            ? start_date
            : moment().dayOfYear(1).format("YYYY-MM"),
          end_date: end_date
            ? end_date
            : moment().dayOfYear(365).format("YYYY-MM"),
        })
        .then((res) => {
          const data = res.list;
          let listCash = data.filter((item) => !item.net_name);
          let newListCash = listCash.map((item) => item.amount);

          let listNewCash = data.filter((item) => item.net_name);
          let listsCash = listNewCash.map((itme) => itme.net_amount);
          let arrCash = Math.max(...newListCash, ...listsCash);
          chartCash.chart1.annotation().text({
            content: "元",

            style: {
              fill: "#8c8c8c",
              fontWeight: 300,
            },
            offsetY: -380,
            offsetX: -32,
          });
          chartCash.chart1.scale({
            amount: {
              max: Number(arrCash),
              min: 0,
              nice: true,
            },
            net_amount: {
              max: Number(arrCash),
              min: 0,
              nice: true,
            },
          });
          chartCash.chart1.changeData(data);
          chartCash.chart1.render();
        });
    };

    // 现金流预测 Echarts
    const valueMonthly = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const monthlyChange = (date, dateString) => {
      monthlyEcharts(dateString[0], dateString[1]);
    };
    let list = 5264153.145121;
    console.log(String(parseInt(list)).length);
    const chartMonthly = {};
    const pickerMonthly = ref("date");
    const monthlyMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const monthlyEcharts = (start_date, end_date) => {
      if (!chartMonthly.chart1) {
        chartMonthly.chart1 = new Chart({
          container: "monthlyEcharts",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        chartMonthly.chart1.tooltip({
          showCrosshairs: false,
          shared: true,
          showMarkers: false,
        });

        chartMonthly.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 720,
        });
        chartMonthly.chart1.axis("amount", {
          animate: true,
          label: {
            formatter: (val) => {
              return val;
            },
          },
          position: "left",
        });

        chartMonthly.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });
        chartMonthly.chart1.axis("net_amount", {
          position: "left",
          animate: true,
          label: {
            formatter: (val) => {
              return val;
            },
          },
        });

        chartMonthly.chart1.legend("name", {
          position: "right-top",
          layout: "horizontal",
        });
        chartMonthly.chart1.legend("net_name", {
          position: "right-top",
          layout: "horizontal",
        });
        chartMonthly.chart1
          .interval()
          .position("date*amount")
          .style({ radius: [20, 20, 0, 0] })
          .size(10)
          .color("name", (val) => {
            if (val === "支出") {
              return "red";
            }
            return "#6294f9";
          })
          .adjust([
            {
              type: "dodge",
              marginRatio: 0.2,
            },
          ]);
        chartMonthly.chart1
          .line()
          .position("date*net_amount")
          .color("net_name")
          .shape("smooth");

        chartMonthly.chart1
          .area()
          .position("date*net_amount")
          .color("net_name")
          .shape("smooth");
      }
      request
        .get("/org", "/asset/expectCashFlow", {
          startDate: start_date
            ? start_date
            : moment().dayOfYear(1).format("YYYY-MM"),
          endDate: end_date
            ? end_date
            : moment().dayOfYear(365).format("YYYY-MM"),
        })
        .then((res) => {
          const data = res.list;
          let list = data.filter((item) => item.name);
          let newList = list.map((item) => item.amount);

          let listNew = data.filter((item) => item.net_amount);
          let lists = listNew.map((itme) => itme.net_amount);
          let arr = Math.max(...newList, ...lists);
          chartMonthly.chart1.annotation().text({
            content: "元",

            style: {
              fill: "#8c8c8c",
              fontWeight: 300,
            },
            offsetY: -380,
            offsetX: -20,
          });
          chartMonthly.chart1.scale({
            amount: {
              max: Number(arr),
              min: 0,
              nice: true,
            },
            net_amount: {
              max: Number(arr),
              min: 0,
              nice: true,
            },
          });
          chartMonthly.chart1.changeData(data);
          chartMonthly.chart1.render();
        });
    };

    // 收缴率
    const chartCollectio = {};
    const pickerCollectionref = ref("date");
    const cashDateCollection = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const getCollection = () => {
      if (!chartCollectio.chart1) {
        chartCollectio.chart1 = new Chart({
          container: "Collection",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        chartCollectio.chart1.scale({
          rate: {
            max: 100,
            min: 0,
            nice: true,
          },
        });
        chartCollectio.chart1.tooltip({
          showCrosshairs: true,
          shared: true,
        });
        chartCollectio.chart1.annotation().text({
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -15,
        });
        chartCollectio.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 720,
        });

        chartCollectio.chart1.axis("rate", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val + "%";
            },
          },
        });
        chartCollectio.chart1
          .line()
          .position("date*rate")
          .color("name")
          .adjust([
            {
              type: "dodge",
              marginRatio: 0.5,
            },
          ]);
        chartCollectio.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });
        chartCollectio.chart1.legend({
          position: "top-right",
        });
      }
      let params = {
        startDate: moment().dayOfYear(1),
        endDate: moment().dayOfYear(365),
      };
      if (cashDateCollection.value && cashDateCollection.value.length > 0) {
        params.startDate = cashDateCollection.value[0].format("YYYY-MM");
        params.endDate = cashDateCollection.value[1].format("YYYY-MM");
      }
      request
        .get("/org", "/asset/paymentRateTrend", {
          ...params,
        })
        .then((res) => {
          chartCollectio.chart1.changeData(res.list);
          chartCollectio.chart1.render();
        });
    };

    // 分摊收缴率
    const chartShareRate = {};
    const cashDateShareRate = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const getShareRate = () => {
      if (!chartShareRate.chart1) {
        chartShareRate.chart1 = new Chart({
          container: "shareRate2",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        chartShareRate.chart1.scale({
          rate: {
            max: 100,
            min: 0,
            nice: true,
          },
        });
        chartShareRate.chart1.tooltip({
          showCrosshairs: true,
          shared: true,
        });
        chartShareRate.chart1.annotation().text({
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -16,
        });
        chartShareRate.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "年",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
        });

        chartShareRate.chart1.axis("rate", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val + "%";
            },
          },
        });

        chartShareRate.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });
        chartShareRate.chart1.legend({
          position: "top-right",
        });

        chartShareRate.chart1
          .line()
          .position("date*rate")
          .color("name")
          .shape("smooth");
      }
      let params = {
        startDate: moment().dayOfYear(1),
        endDate: moment().dayOfYear(365),
      };
      if (cashDateShareRate.value && cashDateShareRate.value.length > 0) {
        params.startDate = cashDateShareRate.value[0].format("YYYY-MM");
        params.endDate = cashDateShareRate.value[1].format("YYYY-MM");
      }
      request
        .get("/org", "/board/collectionRate", {
          ...params,
        })
        .then((res) => {
          nextTick(() => {
            chartShareRate.chart1.changeData(res.list);
            chartShareRate.chart1.render();
            console.log(chartShareRate.chart1, "chart22222");
          });
        });
    };

    // 收益
    const profitChart = {};
    const profitMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const getProfit = () => {
      if (!profitChart.chart1) {
        profitChart.chart1 = new Chart({
          container: "profit2",
          autoFit: true,
          height: 500,
          padding: [70],
        });

        profitChart.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        profitChart.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0.5,
          // offsetX: 720,
        });
        profitChart.chart1.axis("amount", {
          animate: true,
          label: {
            formatter: (val) => {
              return val + ".00";
            },
          },
          position: "left",
        });
        profitChart.chart1.axis("net_amount", {
          position: "left",
          animate: true,
          label: {
            formatter: (val) => {
              return val + ".00";
            },
          },
        });
        profitChart.chart1.tooltip({
          showMarkers: false,
        });
        profitChart.chart1.interaction("active-region");
        profitChart.chart1.legend("name", {
          position: "right-top",
          layout: "horizontal",
        });
        profitChart.chart1.legend("net_name", {
          position: "right-top",
          layout: "horizontal",
        });
        profitChart.chart1
          .interval()
          .position("date*amount")
          .style({ radius: [20, 20, 0, 0] })
          .color("name", (val) => {
            if (val === "支出") {
              return "red";
            }
            return "#6294f9";
          })
          .size(10)
          .adjust([
            {
              type: "dodge",
              marginRatio: 0.2,
            },
          ]);
        profitChart.chart1
          .line()
          .position("date*net_amount")
          .color("net_name")
          .shape("smooth");
        profitChart.chart1
          .area()
          .position("date*net_amount")
          .color("net_name")
          .shape("smooth");
      }

      let params = {
        start_date: moment().dayOfYear(1),
        end_date: moment().dayOfYear(365),
      };
      if (profitMoment.value && profitMoment.value.length > 0) {
        params.start_date = profitMoment.value[0].format("YYYY-MM");
        params.end_date = profitMoment.value[1].format("YYYY-MM");
      }
      request
        .get("/org", "/board/profitStatic", {
          ...params,
        })
        .then((res) => {
          const data = res.list;

          let listProfit = data.filter((item) => item.name);
          let newListProfit = listProfit.map((item) => item.amount);

          let listNewProfit = data.filter((item) => item.net_name);
          let listsProfit = listNewProfit.map((itme) => itme.net_amount);

          let arrProfit = Math.max(...newListProfit, ...listsProfit);
          profitChart.chart1.annotation().text({
            content: "元",
            style: {
              fill: "#8c8c8c",
              fontWeight: 300,
            },
            offsetY: -380,
            offsetX: -33,
          });
          profitChart.chart1.scale({
            amount: {
              max: Number(arrProfit),
              min: 0,
              nice: true,
            },
            net_amount: {
              max: Number(arrProfit),
              min: 0,
              nice: true,
            },
          });
          profitChart.chart1.changeData(res.list);
          profitChart.chart1.render();
        });
    };

    const customer_label = computed(() => {
      return store.getters.basicConfig.customer_label;
    });

    onMounted(() => {
      cash();
      monthlyEcharts();
      getCollection();
      getShareRate();
      getProfit();
    });

    onUnmounted(() => {
      if (chartCash.chart1) {
        chartCash.chart1.destroy();
      }
      if (chartMonthly.chart1) {
        chartMonthly.chart1.destroy();
      }
      if (chartCollectio.chart1) {
        chartCollectio.chart1.destroy();
      }
      if (chartShareRate.chart1) {
        chartShareRate.chart1.destroy();
      }
      if (profitChart.chart1) {
        profitChart.chart1.destroy();
      }
    });

    return {
      cash,
      getCollection,
      getShareRate,
      cashDateCollection,
      pickerCollectionref,
      pickerCash,
      cashFlowList,
      collectionRateList,
      bondList,
      moment,
      cashMoment,
      cashDateShareRate,
      getProfit,
      monthlyMoment,
      pickerMonthly,
      monthlyEcharts,
      value,
      handleChange,
      valueMonthly,
      monthlyChange,
      profitMoment,
      cashFlowListWatch,
      amountStreamWtch,
      incomeWtch,
      payWatch,
      overWatch,
      bondAmountWatch,
      customer_label,
    };
  },
});
</script>

<style lang="less" scoped>
.heads {
  margin-bottom: 10px;
  display: flex;
}
.linear {
  height: 1px;
  background-color: #f0f2f5;
}
.Line {
  width: 100%;
  height: 2px;
  background-color: #e7eaed;
}
.lineText {
  top: -12px;
  left: 48%;
  background-color: #f0f2f5;
  padding: 0 10px;
}
.chart-box {
  // height: 400px;
  background: #fff;
  padding: 10px;
  width: 49.5%;
}
.head {
  font-size: 18px;
  font-weight: 600;
}
.workbench {
  padding: 10px;
}
:deep(.ant-card-body){
  padding: 0px;
}
</style>
